import React, {useState, useEffect} from 'react'
import { Toast, Stepper } from 'react-vant'
import NavBar from '@components/NavBar'
import { Plus, Arrow } from '@react-vant/icons';
import request from "@services/request";
import './styles/confirm.less'

const OrderConfirm = (props) => {
  const [isInitialOrder, setIsInitialOrder] = useState(props.searchParams.get('reorder') ? false : true)
  const [count, setCount] = useState(1)
  const [info, setInfo] = useState({})
  const [currentAddress, setCurrentAddress] = useState(null)

  const { publicKey, signMessage, address } = JSON.parse(localStorage.getItem('biwSign') || '{}')

  useEffect(() => {
    setInfo(props.state.listGoods.find(item => item.id === props.searchParams.get('id')))
    setCurrentAddress(props.state.listAddress.find(item => item.status === '1'))
  }, [])

  const shopSubmit = async (type) => {
    if (!currentAddress) return Toast.info('请选择收货地址')
      console.log(444)
    Toast.loading({
      message: '正在提交',
      forbidClick: true,
      onOpened: async () => {
        const params = {
          amount: info.amount,
          type,
          num: count,
          sign: signMessage,
          publicKey: publicKey,
          addressId: currentAddress.id,
          goodId: info.id
        }

        try {
          const res = await request.post("app_server/buy", params);
        } catch (error) {
          console.log(error)
        }
      }
    });
  }

  return (
    <>
      <div className="background"></div>
      <div className="order-confirm">
        <NavBar title={isInitialOrder ? '认购订单' : '复投订单'} onClickLeft={() => props.navigate(-1)} />
        <div className="main">
          <div className="consignee" onClick={() => props.navigate(`/address`)}>
            {
              !currentAddress ? <div className="consignee-empty"><Plus  />新增收货地址</div> : (
                <div className="selected-address">
                  <div className="selected-address-info">
                    <p>{currentAddress.a}{currentAddress.b}{currentAddress.c}{currentAddress.d}</p>
                    <p>{currentAddress.name} {currentAddress.phone}</p>
                  </div>
                  <Arrow  />
                </div>
              )
            }
          </div>
          <div className="order-info">
            <div className="order-info-main">
              <div className="order-info-cover" style={{background: `url('https://www.nanaplay.net/pic/${info.picName}') 0% 0% / 100% no-repeat`}}></div>
              <div className="order-info-content">
                <div className="order-info-title">{info.name}</div>
                <div className="order-info-detail">{info.detail}</div>
                <div className="order-info-footer">
                  <div className="order-info-price">$ {info.amount}</div>
                  <Stepper
                    value={count}
                    min="1"
                    onChange={(val) => setCount(val)}
                    theme="round"
                    buttonSize="18"
                    disableInput
                  />
                </div>
              </div>
            </div>
            <div className="expressage">
              <span>配送</span>
              <span>顺丰快递</span>
            </div>
          </div>
          <div className="order-data">
            <div className="order-data-item">
              <span>出局倍数</span>
              <span>3倍</span>
            </div>
            {/* <div className="order-data-item">
              <span>释放比率</span>
              <span>3%</span>
            </div> */}
            <div className="order-data-item">
              <span>合计</span>
              <span>{info.amount} USDT</span>
            </div>
          </div>
          <div className="order-data">
            <div className="order-data-item">
              <span>收益余额</span>
              <span>{props.state.balanceUsdt} USDT</span>
            </div>
            <div className="order-data-item">
              <span>充值余额</span>
              <span>{props.state.amount} USDT</span>
            </div>
          </div>
          <div className="shop-footer">
            <div className="submit-btn" onClick={() => shopSubmit(1)}>充值购买</div>
            <div className="submit-btn" onClick={() => shopSubmit(2)}>余额购买</div>
          </div>
        </div>
      </div>
    </>
  )
}

export default OrderConfirm;